<template>
  <div class="layoutStatistics-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <div class="submit-btns">
          <div class="row">
            <p class="label">排班统计</p>
            <div v-for="item in shiftList.data" :key="item.id" class="row">
              <div
                :style="{
                  background: item.markColor,
                  width: '17px',
                  height: '17px',
                  borderRadius: '50%',
                  marginRight: '7px',
                  display: 'inline-block',
                  marginLeft: '32px',
                }"
              ></div>
              {{ item.name }}
            </div>
          </div>
          <div class="submit-btns-right">
            <el-button
              type="primary"
              class="submit-btn-export"
              @click="exportData"
            >
              <img class="icon-img" :src="iconExport" alt="" />导出
            </el-button>
          </div>
        </div>
        <Statistics :table="table.data" :searchModel="searchModel" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import iconExport from "@/assets/image/btn/icon-export.png";
import {
  getShiftList,
  getScheduleCount,
} from "./request.js"
import { getFormatDate } from "@/utils/date.js";
import Statistics from "./components/statistics.vue";

const searchModel = ref({
  cashier: "",
  teamId: "",
  year: "",
  month: "",
});
const getSearchParams = (value) => {
  console.log("value ===>", value);
  searchModel.value = value;

  getData();
};

const shiftList = reactive({
  data: [],
});

const table = reactive({ data: [] });

const value = ref(new Date());

const init = () => {
  // 班次选择器
  getShiftList().then((res) => {
    shiftList.data = res.data.result;
  });
  searchModel.value.year = getFormatDate(value.value, "YYYY");
  searchModel.value.month = getFormatDate(value.value, "MM");
  getScheduleCount({
    cashier: searchModel.value.cashier,
    teamId: searchModel.value.teamId,
    year: searchModel.value.year,
    month: searchModel.value.month,
  }).then((res) => {
    table.data = res.data.result;
  });
};
init();

const getData = () => {
  getScheduleCount({
    cashier: searchModel.value.cashier,
    teamId: searchModel.value.teamId,
    year: searchModel.value.year,
    month: searchModel.value.month,
  }).then((res) => {
    table.data = res.data.result;
  });
};

// getData();
</script>

<style lang="less" scoped>
.layoutStatistics-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }

  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;

    .table-component {
      .submit-btns {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;

        .label {
          font-weight: 500;
          font-size: 16px;
          color: #333333;
        }

        .submit-btns-right {
          display: flex;
        }

        .submit-btn-export {
          background: #35c362;
          border: 1px solid #35c362;
          border-radius: 2px;
          margin-left: 12px;
          padding: 5px 16px;
        }

        .icon-img {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
    }
  }

  .row {
    display: flex;
    align-items: center;
  }
}
</style>